<template>
    <section class="EstateDetails-header-box">
        <app-header ref="header"></app-header>

        <div class="Video-house-details">
            <div class="container">
                <a-breadcrumb class="breadcrumb-box">
                    <a-breadcrumb-item><router-link to="/">首页</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item><router-link :to=breadcrumblink>{{ EstateName }}</router-link></a-breadcrumb-item>
                    <a-breadcrumb-item>详情页</a-breadcrumb-item>
                </a-breadcrumb>
                <div class="content">
                    <header>
                        <aside class="clearfix">
                            <div class="left">
                                <em>{{ houseStatus }}</em>
                                <h1>{{ isNull0(EstateHouseDetails.title) }}</h1>
                            </div>
                            <div class="right">
                                <a @click.stop.prevent="UNCollectionHouse(EstateHouseId)" title="收藏房源" alt="收藏房源">
                                    <i :class="collectionHouseIconClass(EstateHouseId)"></i> {{ isCollectedHouse(EstateHouseId, collectionHouseIdItem).tooltip }}
                                </a> |
                                <a href="javaScript:;" id="cencelContrast-button" @click="cencelContrast(EstateHouseId)" v-show="!isContrast(EstateHouseId)"><i class="iconfont icon-cencel"></i> 取消对比</a>
                                <a href="javaScript:;" id="joinContrast-button" @click="joinContrast(EstateHouseId)" v-show="isContrast(EstateHouseId)"><i class="iconfont icon-tianjia"></i> 加入对比</a>
                            </div>
                        </aside>
                        <p>* 因近期开发商频繁上调价格，广告价格有可能滞后实际价格，请以投资顾问报价为准。</p>
                    </header>
                    <!-- 轮播图 -->
                    <a-row :gutter="32">
                        <a-col :xs="24" :sm="24" :md="14" :lg="14" :xl="14" class="left-box">
                            <a-tabs defaultActiveKey="1">
                                <a-tab-pane tab="房源图片" key="1" class="house-photo-box">
                                    <div class="swiper-container gallery-top">
                                        <ul class="swiper-wrapper">
                                            <li class="swiper-slide" v-for="(item, index) in housePhotoItem" :key="index">
                                                <img :src="isNullImg(item)" preview="item.length" preview-text="房源图片" :title="EstateHouseDetails.title" :alt="EstateHouseDetails.title">
                                            </li>
                                        </ul>
                                        <div class="swiper-button-next iconfont icon-you"></div>
                                        <div class="swiper-button-prev iconfont icon-zuo"></div>
                                    </div>
                                    <div class="swiper-container gallery-thumbs clearfix">
                                        <ul class="swiper-wrapper clearfix">
                                            <li class="swiper-slide clearfix" v-for="(item, index) in housePhotoItem" :key="index">
                                                <img :src="isNullImg(item)">
                                            </li>
                                        </ul>
                                    </div>
                                </a-tab-pane>
                                <a-tab-pane tab="房源视频" key="2" class="house-video-box">
                                    <div v-html="isNull0(EstateHouseDetails.video)"></div>
                                </a-tab-pane>
                            </a-tabs>
                            <a-spin :spinning="housePhotoVideoLoading"/>
                        </a-col>
                        <a-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" class="right-box">
                            <header v-if="EstateHouseDetails.minPrice">
                                <span>售价：{{ isCurrencySymbol(EstateHouseDetails.countryName) }} {{ isNull0(EstateHouseDetails.minPrice) }}万起</span> |
                                <span>{{ isNull0_RMB(EstateHouseDetails.minPrice, '万起', isCurrency(EstateHouseDetails.countryName)) }}</span>
                            </header>
                            <header v-else>
                                <span>售价：{{ isCurrencySymbol(EstateHouseDetails.countryName) }} {{ isNull0(EstateHouseDetails.price) }}万</span> |
                                <span>{{ isNull0_RMB(EstateHouseDetails.price, '万', isCurrency(EstateHouseDetails.countryName)) }}</span>
                            </header>
                            <p class="red">1美元 = {{isNull0(exchangeRateUSD.exchangeRate ? exchangeRateUSD.exchangeRate.toFixed(3) : null)}}人民币（数据更新时间：{{momentFormat(exchangeRateUSD.releaseTime, 'YYYY-MM-DD')}}）</p>
                            <p class="red">1泰铢 = {{isNull0(exchangeRateTHB.exchangeRate ? exchangeRateTHB.exchangeRate.toFixed(3) : null)}}人民币（数据更新时间：{{momentFormat(exchangeRateTHB.releaseTime, 'YYYY-MM-DD')}}）</p>
                            <p class="red">1欧元 = {{isNull0(exchangeRateEUR.exchangeRate ? exchangeRateEUR.exchangeRate.toFixed(3) : null)}}人民币（数据更新时间：{{momentFormat(exchangeRateEUR.releaseTime, 'YYYY-MM-DD')}}）</p>
                            <p class="red">1日元 = {{isNull0(exchangeRateJPY.exchangeRate ? exchangeRateJPY.exchangeRate.toFixed(3) : null)}}人民币（数据更新时间：{{momentFormat(exchangeRateJPY.releaseTime, 'YYYY-MM-DD')}}）</p>
                            <p class="fullAddress">{{ isNull0(EstateHouseDetails.address) }}</p>
                            <div class="loanCalculator-box clearfix">
                                <template v-if="EstateHouseDetails.countryName == '美国'">
                                    <a href="#HouseLoanCalculator"><i class="iconfont icon-fangdai1"></i> 房贷计算器</a>
                                    <!--<a href="#ClientPurchaseHouseAbility"><i class="iconfont icon-jihuanengli"></i> 客户购房能力</a>-->
                                    <a href="#RentRatioCalculator"><i class="iconfont icon-shujutongji"></i> 租售比计算器</a>
                                </template>

                                <router-link to="/HelpMeFindHouse"><i class="iconfont icon-fangzi-copy"></i> 帮我找房</router-link>
                            </div>
                            <p>
                                <span id="city">所属城市：{{isNull0(EstateHouseDetails.cityName)}}</span>
                                <span id="house-type">项目类型：{{isNull0(EstateHouseDetails.projectType)}}</span>
                            </p>
                            <p class="dashed-bottom-border" id="investment-type">投资类型：{{isNull0(EstateHouseDetails.investmentType)}}</p>
                            <p class="Door-model">主力户型：{{isNull0(EstateHouseDetails.houseType)}}</p>
                            <p class="dashed-bottom-border area" v-if="EstateHouseDetails.minArea">面积：{{isNull0(EstateHouseDetails.minArea)}} {{isMinMaxArea(EstateHouseDetails.maxArea)}} </p>
                            <p class="dashed-bottom-border area" v-else>面积：{{ isNull0(EstateHouseDetails.area, 'm²') }}</p>
                            <aside class="message-btn">
                                <a-button class="btn-danger btn-circle" size="large" @click.stop="cellMessageModal"><i class="iconfont icon-fabushijian"></i> 预约咨询</a-button>
                                <a-button class="btn-danger btn-circle" size="large" @click.stop="callMEIQIA"><i class="iconfont icon-fabushijian"></i> 立即咨询</a-button>
                            </aside>
                            <p class="tel"><i class="iconfont icon-dianhua"></i> 咨询电话 400-600-4982</p>
                        </a-col>
                    </a-row>
                </div>
            </div>

            <!--客户咨询留言modal框——留言类型，type：1.购房意向、2.移民、3.留学、4.保险、5.1秒变身海外业主-->
            <clientMessageModal ref="MessageModal" :msgType="1"></clientMessageModal>

            <p v-show="false">{{getExchangeRate}}</p>
            <p v-show="false">{{getEstateHouseDetails}}</p>
            <p v-show="false">{{getHouseContrast}}</p>
        </div>
    </section>
</template>

<script>
    import Header from '../../../../components/header.vue';//公共组件——头部
    import clientMessageModal from '../../../../components/clientMessageModal.vue';//公共组件——客户咨询留言modal框

    export default {
        data() {
            return {
                EstateName: '',   //房源列表页：美国、泰国、希腊
                breadcrumblink: '', //跳转回上级，新闻资讯类型列表页

                EstateHouseId: this.$route.query.EstateHouseId, // 详情Id
                housePhotoItem: [], //房源图片数据
                galleryTop: null,//轮播图配置
                galleryThumbs: null,//轮播图配置
                housePhotoVideoLoading: true,//房源图片加载loading
                houseStatus: '热卖',//房源状态，1：热卖，2：在售，3：售罄，4：稀缺，5：特惠，6：尾盘

                exchangeRateUSD: {},   //汇率数据——美元
                exchangeRateTHB: {},   //汇率数据——泰铢
                exchangeRateEUR: {},   //汇率数据——欧元
                exchangeRateJPY: {},   //汇率数据——日元
                EstateHouseDetails: {}, //新房详情数据
                HouseContrastIdArr: [],//记录房源对比的id
                collectionHouseIdItem: [],//当前登录用户的已收藏房源列表数据

            }
        },
        computed: {
            //从state获取汇率数据
            getExchangeRate() {
                if(this.$store.getters.get_exchangeRate){
                    //取出美元的汇率数据
                    this.$store.getters.get_exchangeRate.forEach((i) => {
                        if(i.currencyName == '美元'){
                            this.exchangeRateUSD = i;
                        }
                    });
                    //取出泰铢的汇率数据
                    this.$store.getters.get_exchangeRate.forEach((i) => {
                        if(i.currencyName == '泰国铢'){
                            this.exchangeRateTHB = i;
                        }
                    });
                    //取出欧元的汇率数据
                    this.$store.getters.get_exchangeRate.forEach((i) => {
                        if(i.currencyName == '欧元'){
                            this.exchangeRateEUR = i;
                        }
                    });
                    //取出日元的汇率数据
                    this.$store.getters.get_exchangeRate.forEach((i) => {
                        if(i.currencyName == '日元'){
                            this.exchangeRateJPY = i;
                        }
                    });
                }
                return this.$store.getters.get_exchangeRate
            },
            //从state获取新房详情数据
            getEstateHouseDetails() {
                if(this.$store.getters.get_EstateHouseDetails){
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0) {
                        this.EstateHouseDetails = this.$store.getters.get_EstateHouseDetails;
                        //判断房源状态，1：热卖，2：在售，3：售罄，4：稀缺，5：特惠，6：尾盘
                        switch (this.EstateHouseDetails.status){
                            case 1:
                                this.houseStatus = '热卖';
                                break;
                            case 2:
                                this.houseStatus = '在售';
                                break;
                            case 3:
                                this.houseStatus = '售罄';
                                break;
                            case 4:
                                this.houseStatus = '稀缺';
                                break;
                            case 5:
                                this.houseStatus = '特惠';
                                break;
                            case 6:
                                this.houseStatus = '尾盘';
                                break;
                        }
                    }
                    //判断对象是否为空
                    if(Object.keys(this.$store.getters.get_EstateHouseDetails).length != 0){
                        //判断countryName是否为美国、泰国、希腊
                        if(this.$store.getters.get_EstateHouseDetails.countryName){
                            //延时1s，否则会造成死循环，或者其他报错
                            this.$nextTick(() => {
                                if(this.$store.getters.get_EstateHouseDetails.countryName == '美国'){
                                    this.EstateName = '美国新房';
                                    this.breadcrumblink = {path: '/USEstate'};
                                }else if(this.$store.getters.get_EstateHouseDetails.countryName == '泰国'){
                                    this.EstateName = '泰国新房';
                                    this.breadcrumblink = {path: '/THEstate'};
                                }else if(this.$store.getters.get_EstateHouseDetails.countryName == '希腊'){
                                    this.EstateName = '希腊新房';
                                    this.breadcrumblink = {path: '/GREstate'};
                                }else if(this.$store.getters.get_EstateHouseDetails.countryName == '日本'){
                                    this.EstateName = '日本新房';
                                    this.breadcrumblink = {path: '/JPEstate'};
                                }


                                //获取房源图片数据
                                this.getHousePhotoData();
                            })
                        }
                    }
                }
                return this.$store.getters.get_EstateHouseDetails
            },
            //从state获取房源对比栏的数据
            getHouseContrast() {
                if(this.$store.getters.get_HouseContrast){
                    this.HouseContrastIdArr = this.$store.getters.get_HouseContrast;
                }
                // if(localStorage.duibi_houseId){
                //     this.HouseContrastIdArr = localStorage.duibi_houseId.split(',');
                // }
                return this.$store.getters.get_HouseContrast
            },
        },
        created() {
        },
        mounted() {
            // 判断用户是否登录，已登录则获取当前登录用户的已收藏房源列表数据
            if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                this.getLoggedUserCollectionHouse();
            }
        },
        methods: {
            //获取房源图片数据
            getHousePhotoData(){
                this.housePhotoVideoLoading = true;

                this.$get('/house/photo/'+ this.EstateHouseId).then(res => {
                    this.housePhotoVideoLoading = false;
                    if (res.status == 0) {
                        this.housePhotoItem = res.data;

                        this.$nextTick(() => {
                            //重复进入房源详情页时，把上次渲染过的swiper销毁，释放内存
                            if(this.galleryThumbs){
                                this.galleryThumbs.destroy();
                            }
                            if(this.galleryTop){
                                this.galleryTop.destroy();
                            }

                            let _this = this;
                            _this.galleryThumbs = new Swiper('.gallery-thumbs', {
                                spaceBetween: 10,
                                slidesPerView: 5,
                                freeMode: true,
                                loop: true,
                                loopedSlides: Object.keys(this.housePhotoItem).length, //设置所要用到的loop个数(一般设置为本来slide的个数)
                                watchSlidesVisibility: true,
                                watchSlidesProgress: true,
                                slideToClickedSlide: true,//点击slide会过渡到这个slide
                            });
                            _this.galleryTop = new Swiper('.gallery-top', {
                                autoplay: {
                                    delay: 5000,//自动切换的时间间隔，单位ms
                                    stopOnLastSlide: false,//如果设置为true，当切换到最后一个slide时停止自动切换
                                    disableOnInteraction: true,//用户操作swiper之后，是否禁止autoplay。默认为true,如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay
                                },
                                keyboard: { //键盘控制
                                    enabled: true,
                                    onlyInViewport: true,
                                },
                                slidesPerview: 'auto',
                                loop: true,
                                loopedSlides: Object.keys(this.housePhotoItem).length, //设置所要用到的loop个数(一般设置为本来slide的个数)
                                navigation: {
                                    nextEl: '.swiper-button-next',
                                    prevEl: '.swiper-button-prev',
                                },
                                thumbs: {
                                    swiper: _this.galleryThumbs,
                                },
                            });

                            this.galleryTop.update();
                            this.galleryThumbs.update();

                            // 全屏看图功能，图片异步获取后必须调用
                            this.$previewRefresh();
                        })
                    } else {
                        console.log(res.msg);
                    }
                })
            },
            // 获取当前登录用户的已收藏房源列表数据
            getLoggedUserCollectionHouse() {
                this.$get('/collection/houseIds').then(res => {
                    if (res.status == 0) {
                        this.collectionHouseIdItem = res.data;
                        this.$store.commit('set_collectionHouseIdItem', this.collectionHouseIdItem);
                    }else{
                        this.collectionHouseIdItem = [];
                        this.$store.commit('set_collectionHouseIdItem', this.collectionHouseIdItem);
                    }
                });
            },
            //根据当前登录用户的已收藏房源列表数据，判断每个房源的收藏按钮的iconfont类名，没有登录就是默认的收藏iconfont
            collectionHouseIconClass(id){
                return this.isCollectedHouse(id, this.collectionHouseIdItem).class
            },

            //收藏/取消房源
            UNCollectionHouse(EstateHouseId){
                // 判断用户是否登录
                if(this.$store.getters.get_user.name != '' && this.$store.getters.get_user.headPhoto != ''){
                    let action = '';
                    if (this.collectionHouseIdItem.includes(EstateHouseId)) {
                        action = 'unsave';
                        this.collectionHouseFN(EstateHouseId, action);
                    }else{
                        action = 'save';
                        this.collectionHouseFN(EstateHouseId, action);
                    }
                }else{
                    //触发公共登录modal框
                    this.$refs.header.$emit('header_handleLoginModal');
                }
            },
            collectionHouseFN(EstateHouseId, action){
                this.$post('/collection/house/'+ EstateHouseId).then(res => {
                    if (res.status == 0) {
                        if (action == 'unsave'){
                            this.$notification['success']({
                                message: '取消收藏房源成功！',
                            });
                        }else{
                            this.$notification['success']({
                                message: '收藏房源成功！',
                            });
                        }

                        //更新当前登录用户的已收藏房源列表数据
                        this.getLoggedUserCollectionHouse();
                    } else {
                        this.$message.error(res.msg);
                    }
                })
            },

            //加入对比
            joinContrast (id) {
                if(this.HouseContrastIdArr.length >= 3){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已满，您可以删除不需要的栏内房源再继续添加哦！'
                    });
                }else{
                    this.HouseContrastIdArr.push(id);
                    //新房列表页、个人中心-我的收藏房源页使用——房源对比
                    this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);
                }
            },
            //取消对比
            cencelContrast (id) {
                //-----------------------把对应的值从数组删除-----------------------
                Array.prototype.removeByValue = function(val) {
                    for (var i = 0; i < this.length; i++) {
                        if (this[i] == val) {
                            this.splice(i, 1);
                            break;
                        }
                    }
                };
                this.HouseContrastIdArr.removeByValue(id);
                //新房列表页、个人中心-我的收藏房源页使用——房源对比
                this.$store.commit('set_HouseContrast', this.HouseContrastIdArr);

                if(this.HouseContrastIdArr.length == 0){
                    this.$notification['warning']({
                        message: '华美优胜提示您：',
                        description: '对比栏已清空！'
                    });
                }
            },
            //判断此房源是否添加到房源对比栏
            isContrast(id) {
                let isShow = false;//false显示取消对比按钮，true显示加入对比按钮
                if (this.HouseContrastIdArr.indexOf(id) != -1) {
                    isShow = false;
                } else {
                    isShow = true;
                }
                return isShow;
            },
            //触发显示公共客户咨询留言modal框
            cellMessageModal(){
                this.$refs.MessageModal.$emit('handleMessageModal');
            },


        },
        components: {
            'app-header': Header,//公共组件——头部
            clientMessageModal,//公共组件——客户咨询留言modal框

        }
    }
</script>
<style lang="less" type="text/less">
    body{
        .EstateDetails-header-box {
            .Video-house-details {
                padding: 50px 0;
                background: #05263a;
                > .container {
                    padding: 0;
                    > .breadcrumb-box {
                        padding-bottom: 10px;
                        border-bottom: 1px solid #636262;
                        margin-bottom: 20px;
                        color: #fff;
                        a,
                        span,
                        .ant-breadcrumb-separator {
                            font-size: 16px;
                            color: #fff;
                        }
                    }
                    > .content {
                        > header {
                            > aside {
                                line-height: 44px;
                                color: #fff;
                                > .left {
                                    > em {
                                        padding: 6px 8px;
                                        background: #f85148;
                                        font-size: 20px;
                                    }
                                    > h1 {
                                        display: inline;
                                        font-size: 24px;
                                        color: #fff;
                                        margin: 0 0 0 15px;
                                    }
                                }
                                > .right {
                                    a {
                                        margin: 0 8px;
                                        cursor: pointer;
                                        color: #fff;
                                        > i {
                                            color: #f85148;
                                            font-weight: bold;
                                        }
                                    }
                                }
                            }
                            > p {
                                color: #f85148;
                            }
                        }
                        > .ant-row {
                            /* 左侧轮播图和视频 */
                            > .left-box {
                                padding: 0;
                                min-height: 400px;
                                > .ant-tabs {
                                    color: #666;
                                    /*.ant-tabs-bar{*/
                                    /*border: none;*/
                                    /*}*/
                                    .house-photo-box {
                                        > .gallery-top,
                                        > .gallery-thumbs {
                                            width: 100%;
                                            height: 100%;
                                            margin-left: auto;
                                            margin-right: auto;
                                            > .swiper-wrapper {
                                                > .swiper-slide {
                                                    > img {
                                                        width: 100%;
                                                        height: 400px;
                                                    }
                                                }
                                            }
                                        }
                                        > .gallery-top {
                                            height: 85%;
                                            position: relative;
                                            > .swiper-wrapper {
                                                > .swiper-slide {
                                                    background: #000;
                                                }
                                            }
                                        }
                                        > .gallery-thumbs {
                                            height: 15%;
                                            margin: 10px 0;
                                            > .swiper-wrapper {
                                                > .swiper-slide {
                                                    width: 14%;
                                                    opacity: 0.4;
                                                    > img {
                                                        width: 100%;
                                                        height: 70px;
                                                    }
                                                }
                                                > .swiper-slide-thumb-active {
                                                    opacity: 1;
                                                }
                                            }
                                        }
                                    }
                                    .house-video-box {
                                        > div {
                                            > iframe {
                                                width: 100% !important;
                                            }
                                        }
                                    }
                                }
                            }
                            /* 右侧房源基本信息 */
                            > .right-box {
                                text-align: left;
                                color: #fff;
                                > header {
                                    margin: 60px 0 12px 0;
                                    font-size: 20px;
                                    > span {
                                        margin: 0 12px;
                                    }
                                    > span:first-of-type {
                                        margin: 0 12px 0 0;
                                    }
                                }
                                > p {
                                    font-size: 18px;
                                    margin: 8px 0;
                                    > span {
                                        margin: 0 12px;
                                    }
                                    > span:first-of-type {
                                        margin: 0 12px 0 0;
                                    }
                                }
                                > p.red {
                                    font-size: 14px;
                                    color: #f95249;
                                }
                                > p.fullAddress {
                                    font-size: 14px;
                                }
                                > p.dashed-bottom-border {
                                    padding: 0 0 20px 0;
                                    border-bottom: 1px dashed #ccc;
                                }
                                > p.Door-model {
                                    margin: 20px 0 0 0;
                                }
                                > p.tel {
                                    text-align: center;
                                }
                                > .loanCalculator-box {
                                    margin: 16px 0;
                                    > a {
                                        margin: 0 12px;
                                        color: #fff;
                                        > i {
                                            color: #f95249;
                                        }
                                    }
                                    > a:first-of-type {
                                        margin: 0 12px 0 0;
                                    }
                                }
                                > .message-btn {
                                    text-align: center;
                                    margin: 12px 0;
                                    > button {
                                        background: #f95148;
                                        margin: 12px;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
</style>